<template>
  <div class="customer-service-view">
    <div id="chat-button" class="chat-button" @click="toggleChat">
      客服助手
    </div>
    <div id="chat-container" class="chat-container" :class="{ hidden: !isChatVisible }">
      <div class="chat-header">客服助手</div>
      <div id="chat-messages" class="chat-messages">
        <div v-for="(msg, index) in messages" :key="index" :class="['message', msg.type]">
          {{ msg.content.text }}
        </div>
      </div>
      <div class="chat-input">
        <input v-model="inputMessage" type="text" placeholder="请输入您的问题..." @keyup.enter="sendMessage" />
        <button id="send" @click="sendMessage">发送</button>
      </div>
      <div class="quick-replies">
        <button @click="sendQuickReply('常见问题')">常见问题</button>
        <button @click="sendQuickReply('技术支持')">技术支持</button>
        <button @click="sendQuickReply('反馈建议')">反馈建议</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomerServiceView',
  data() {
    return {
      isChatVisible: false,
      messages: [
        { type: 'assistant', content: { text: '您好，我是客服助手，有什么可以帮助您的吗？' } },
      ],
      inputMessage: '',
    };
  },
  methods: {
    toggleChat() {
      this.isChatVisible = !this.isChatVisible;
    },
    sendMessage() {
      const message = this.inputMessage.trim();
      if (!message) return;

      this.messages.push({ type: 'user', content: { text: message } });
      this.inputMessage = ''; // 清空输入框
      this.generateResponse(message);
    },
    sendQuickReply(reply) {
      this.messages.push({ type: 'user', content: { text: reply } });
      this.generateResponse(reply);
    },
    generateResponse(userMessage) {
      let responseText = '';

      // 模拟 AI 大模型的响应
      if (userMessage.includes('常见问题')) {
        responseText = '请问您想了解哪方面的常见问题？';
      } else if (userMessage.includes('技术支持')) {
        responseText = '请描述您遇到的技术问题。';
      } else if (userMessage.includes('反馈建议')) {
        responseText = '感谢您的反馈，请告诉我您的建议。';
      } else {
        responseText = '抱歉，我不太明白您的意思。';
      }

      this.messages.push({ type: 'assistant', content: { text: responseText } });
    },
  },
};
</script>

<style scoped>
.customer-service-view {
  /* 添加样式以匹配您的设计 */
}
.chat-header {
  font-size: 20px;
  font-weight: bold;
}
.chat-messages {
  max-height: 400px;
  overflow-y: auto;
}
.message {
  margin: 10px 0;
}
.message.user {
  text-align: right;
}
.message.assistant {
  text-align: left;
}
.quick-replies {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
</style>
